<template>
  <div class="wrap">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="ruleForm-wrap"
    >
      <el-form-item label="场馆代码" prop="routeParams">
        <el-input v-model="routeParams" disabled />
      </el-form-item>
      <el-form-item label="区块名称" prop="area_name">
        <el-input v-model="ruleForm.area_name" />
      </el-form-item>
      <el-form-item label="区块坐标-左上角x" prop="left_up_x">
        <el-input v-model.number="ruleForm.left_up_x" />
      </el-form-item>
      <el-form-item label="区块坐标-左上角y" prop="left_up_y">
        <el-input v-model.number="ruleForm.left_up_y" />
      </el-form-item>
      <el-form-item label="区块坐标-右下角x" prop="right_down_x">
        <el-input v-model.number="ruleForm.right_down_x" />
      </el-form-item>
      <el-form-item label="区块坐标-右下角y" prop="right_down_y">
        <el-input v-model.number="ruleForm.right_down_y" />
      </el-form-item>
      <el-form-item label="水深区块标记">
        <el-select v-model.number="ruleForm.water_depth" @change="handleChange" placeholder="请选择">
          <el-option
            v-for="item in water_depth_arr"
            :key="item"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="btn-wrap">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          注册
        </el-button>
        <el-button type="warning" plain @click="resetForm(ruleFormRef)"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { postData } from '@/http/request.js'
import { useRouter, useRoute } from 'vue-router'
let router = useRouter()
let route = useRoute()
const routeParams = route.query.site_code // 获取路由参数
let ruleFormRef = ref(null)

let water_depth_arr = ref([
  { label: '水上区域', value: 0 },
  { label: '浅水区', value: 1 },
  { label: '深水区', value: 2 },
])

// var checkNumber = (rule, value, callback) => {
//   if (!value) {
//     return callback(new Error('请输入5位数字，且不能为00000'))
//   }
//   setTimeout(() => {
//     if (!Number.isInteger(value)) {
//       return callback(new Error('请输入5位数字，且不能为00000'))
//     } else {
//       if (value.toString().length !== 5) {
//         return callback(new Error('请输入5位数字，且不能为00000'))
//       } else {
//         callback()
//       }
//     }
//   }, 500)
// }

const ruleForm = reactive({
  site_code: routeParams,
  area_name: '',
  left_up_x: '',
  left_up_y: '',
  right_down_x: '',
  right_down_y: '',
  water_depth: '',
})

const rules = reactive({
  site_code: [{ required: true,  trigger: 'blur' }],
  area_name: [{ required: true, message: '请输入场馆名称', trigger: 'blur' }],
  left_up_x: [{ required: false, message: '请输入', trigger: 'blur' }],
  left_up_y: [{ required: false, message: '请输入', trigger: 'blur' }],
  right_down_x: [{ required: false, message: '请输入', trigger: 'blur' }],
  right_down_y: [{ required: false, message: '请输入', trigger: 'blur' }],
  water_depth: [{ required: false, message: '请选择', trigger: 'blur' }],
})

let handleChange = (val)=>{
ruleForm.water_depth = val
}

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      postData('/manage/site/area/register', {
        site_code: ruleForm.site_code,
        area_name: ruleForm.area_name,
        left_up_x: ruleForm.left_up_x ? ruleForm.left_up_x : '',
        left_up_y: ruleForm.left_up_y ? ruleForm.left_up_y : '',
        right_down_x: ruleForm.right_down_x ? ruleForm.right_down_x : '',
        right_down_y: ruleForm.right_down_y ? ruleForm.right_down_y : '',
        water_depth: ruleForm.water_depth ? ruleForm.water_depth : '',
      })
        .then((res) => {
          if (res.code == 0) {
            ElMessage({
              type: 'success',
              message: '注册成功',
            })
            setTimeout(() => {
              router.push('/site/siteArea')
            }, 3000)
          } else {
            ElMessage({
              type: 'error',
              message: '注册失败',
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scope>
.wrap {
  margin: 20px 0 0 20px;
}
.btn-wrap {
  margin-top: 30px;
}
</style>
